<template>
	<div class="container">
		<div class="greeting" @click="openClick">{{ greetingText }}</div>
		<div class="date-info">{{ formattedDate }}</div>
		<!-- <div class="time-display"> -->
		<!-- <div class="time-segment">当前时间: {{ currentTime }}</div> -->
		<!-- <div class="time-segment">时间段: {{ timePeriod }}</div> -->
		<!-- </div> -->

		<!--    <div class="controls">
      <button @click="toggleFormat">切换日期格式</button>
      <button @click="toggleLanguage">切换语言</button>
      <button @click="refreshTime">刷新时间</button>
    </div> -->

		<!--  <div class="info-panel">
      <h3>功能说明</h3>
      <p>此页面根据当前时间动态显示问候语：<br>
      - 上午 (5:00-11:59): 显示"上午好!"<br>
      - 中午 (12:00-13:59): 显示"中午好!"<br>
      - 下午 (14:00-18:59): 显示"下午好!"<br>
      - 晚上 (19:00-4:59): 显示"晚上好!"</p>
    </div> -->
	</div>
</template>

<script>
	export default {
		name: 'GreetingComponent',
		data() {
			return {
				isChinese: true,
				isStandardFormat: true,
				currentTime: '',
				greetingText: '',
				formattedDate: '',
				timePeriod: '',
				timer: null
			}
		},
		computed: {
			greetings() {
				return {
					chinese: {
						morning: "上午好！",
						noon: "中午好！",
						afternoon: "下午好！",
						evening: "晚上好！"
					},
					english: {
						morning: "Good Morning!",
						noon: "Good Noon!",
						afternoon: "Good Afternoon!",
						evening: "Good Evening!"
					}
				}
			},
			weekdays() {
				return {
					chinese: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
					english: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
				}
			}
		},
		mounted() {
			this.updateDateTime();
			this.timer = setInterval(this.updateDateTime, 1000);
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			openClick() {
				console.log('33');
				// uni.navigateTo({
				// 	url: "/pages/index/gameDisc"
				// })
			},
			updateDateTime() {
				const now = new Date();
				const hours = now.getHours();
				const minutes = now.getMinutes();
				const seconds = now.getSeconds();
				const month = now.getMonth() + 1;
				const day = now.getDate();
				const weekday = now.getDay();

				// 更新时间显示
				this.currentTime =
					`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

				// 确定时间段
				let period;
				if (hours >= 5 && hours < 12) {
					period = "morning";
				} else if (hours >= 12 && hours < 14) {
					period = "noon";
				} else if (hours >= 14 && hours < 19) {
					period = "afternoon";
				} else {
					period = "evening";
				}

				// 设置时间段显示
				this.timePeriod = this.getChinesePeriod(period);

				// 设置问候语
				const lang = this.isChinese ? "chinese" : "english";
				this.greetingText = this.greetings[lang][period];

				// 设置日期信息
				if (this.isStandardFormat) {
					if (this.isChinese) {
						this.formattedDate = `${month}月${day}日，${this.weekdays.chinese[weekday]}`;
					} else {
						this.formattedDate = `${month}/${day}, ${this.weekdays.english[weekday]}`;
					}
				} else {
					if (this.isChinese) {
						this.formattedDate = `${day}日${month}月，${this.weekdays.chinese[weekday]}`;
					} else {
						this.formattedDate = `${day}/${month}, ${this.weekdays.english[weekday]}`;
					}
				}
			},

			getChinesePeriod(period) {
				switch (period) {
					case "morning":
						return "上午";
					case "noon":
						return "中午";
					case "afternoon":
						return "下午";
					case "evening":
						return "晚上";
					default:
						return "";
				}
			},

			toggleFormat() {
				this.isStandardFormat = !this.isStandardFormat;
				this.updateDateTime();
			},

			toggleLanguage() {
				this.isChinese = !this.isChinese;
				this.updateDateTime();
			},

			refreshTime() {
				this.updateDateTime();
			}
		}
	}
</script>

<style scoped>
	/* 样式部分与之前相同 */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.container {
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
		/* background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); */
		/* min-height: 100vh; */
		/* display: flex; */
		/* justify-content: center; */
		/* align-items: center; */
		padding: 20px;
		box-sizing: border-box;
	}

	.container-inner {
		background-color: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		border-radius: 20px;
		padding: 40px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
		text-align: center;
		max-width: 500px;
		width: 100%;
		border: 1px solid rgba(255, 255, 255, 0.2);
	}

	.greeting {
		/* font-size: 3.5rem; */
		font-weight: bold;
		color: white;
		margin-bottom: 20rpx;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
		transition: all 0.5s ease;
	}

	.date-info {
		/* font-size: 1.8rem; */
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 30rpx;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	}

	.time-display {
		/* font-size: 1.2rem; */
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 20px;
		display: flex;
		justify-content: center;
		gap: 15px;
	}

	.time-segment {
		background: rgba(255, 255, 255, 0.15);
		padding: 8px 15px;
		border-radius: 10px;
		backdrop-filter: blur(5px);
	}

	.controls {
		display: flex;
		justify-content: center;
		gap: 15px;
		margin-top: 20px;
	}

	button {
		background: rgba(255, 255, 255, 0.2);
		border: none;
		padding: 10px 20px;
		border-radius: 30px;
		color: white;
		font-size: 1rem;
		cursor: pointer;
		transition: all 0.3s ease;
		backdrop-filter: blur(5px);
	}

	button:hover {
		background: rgba(255, 255, 255, 0.3);
		transform: translateY(-2px);
	}

	.info-panel {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		padding: 15px;
		margin-top: 25px;
		text-align: left;
	}

	.info-panel h3 {
		color: white;
		margin-bottom: 10px;
		font-size: 1.2rem;
	}

	.info-panel p {
		color: rgba(255, 255, 255, 0.8);
		font-size: 0.9rem;
		line-height: 1.5;
	}

	@media (max-width: 600px) {
		.greeting {
			font-size: 1.5rem;
		}

		.date-info {
			font-size: 1rem;
		}

		.container-inner {
			padding: 25px;
		}
	}
</style>